<template>
	<view style="min-height: 100vh;background: #f1f1f1;">
		<view  class="header">
			<view  style="display: flex;justify-content: space-between;padding: 20rpx;">
				<view class="tn-padding" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">团队总人数（人）</view>
					<view class="tn-margin-top-sm" style="margin: 25rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_user_count_all || 0 }}
					</view>
					<view class="tn-margin-top-sm" style="display: flex;">
						<view class="color999">
							<view class="">一级成员</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_user_count_1 || 0 }}
							</view>
						</view>
						<view class="color999" style="margin-left: 50rpx;">
							<view class="">一级成员</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_user_count_2 || 0 }}
							</view>
						</view>
					</view>
				</view>
				<view class="tn-padding" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">团队分销商人数（人）</view>
					<view class="tn-margin-top-sm" style="margin: 25rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_agent_count_all || 0 }}
					</view>
					<view class="tn-margin-top-sm" style="display: flex;">
						<view class="color999">
							<view class="">一级分销商</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_agent_count_1 || 0 }}
							</view>
						</view>
						<view class="color999" style="margin-left: 50rpx;">
							<view class="">二级分销商</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_agent_count_2 || 0 }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<block v-if="listData">
			<view class="" v-for="(item,index) in listData" :key="index" style="display: flex;width: 100%;justify-content: space-between;align-items: center;padding: 10rpx 20rpx;margin: 5rpx 0;background: #fff;">
				<view class="" style="display: flex;align-items: center;height: 100%;">
					<view class="">
						<image :src="info.app.cdnurl+item.avatar" mode="widthFix" style="width: 80rpx;border-radius: 50%;"></image>
					</view>
					<view class="" style="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;">
						<view class="" style="font-size: 30rpx;">{{ item.nickname }}</view>
						<view class="" style="color: #999;font-size: 24rpx;">下级团队{{ item.agent.child_user_count_1 }}人</view>
					</view>
				</view>
				<view class="" style="height: 100%;">
					<view class="" style="font-size: 20rpx;background: rgb(0 0 0 / 20%);color: #fff;width: auto;border-radius: 30rpx;display: inline-block;padding: 8rpx 38rpx;">{{ item.agent.level_info.name }}</view>
					<view class="" style="color: #999;font-size: 24rpx;">{{ item.createtime}}</view>
				</view>
			</view>
		</block>
		<view class="" style="position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;" v-else>
			<tn-empty mode="data"></tn-empty>
		</view>


	</view>
</template>

<script>
	import {
		getAgentTeam
	} from '@/apis/index.js'
	export default {
		data() {
			return {
				list_rows: 5,
				page: 1,
				last_page:"",
				listData: []
			}
		},
		async onLoad() {
			await this.getDataList()
		},
		methods: {
			async getDataList() {
				let res = await getAgentTeam(this.list_rows, this.page)
				if (res.code == 1) {
					this.listData = [...this.listData,...res.data.data]
					this.last_page = res.data.last_page
				}
			}

		},
		onReachBottom() {
			// if (this.last_page < this.page) {
			// 	return
			// }
			
			if (this.page<this.last_page) {
				this.page++
				this.getDataList()
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url('https://oss.taoding1688.com/static/uniapp/static/commission/withdraw_bg.png') no-repeat, linear-gradient(90deg, #e9b461, rgba(233, 180, 97, 0.6))
		// background: linear-gradient(90deg, #e9b461, rgba(233, 180, 97, 0.6));.
		// background:#e9b461;
	}

	.color999 {
		color: #999;
	}
</style>